<template>
  <div>
    <div class="tlheader" style="position: relative">
      <div style="float: left">
        <img
          :src="this.playlist.coverImgUrl"
          alt=""
          style="width: 150px; height: 150px"
        />
      </div>

      <h4
        style="
          display:block
          margin-left: 10px;
          position: absolute;
          left: 180px;
          font-size: 20px;
        "
      >
         {{this.playlist.name}}
      </h4>
      <p style="position:absolute;top:30px;left:180px;font-size:12px"><i class="el-icon-pie-chart"></i> 最近更新：04月22日(每日更新)</p>
      <span style="position:absolute;top:80px;left:180px;font-size:12px">  <el-button type="primary">播放</el-button></span>
      <span style="position:absolute;top:80px;left:300px;font-size:12px">  <el-button >下载</el-button></span>
      <span style="position:absolute;top:80px;left: 420px;font-size:12px">  <el-button >收藏</el-button></span>
    </div>
    <div class="tlfooter">
      <div class="tlfooter_title">
        <h3><span>歌曲列表</span></h3>
      </div>
      <div class="tlfooter_main">
        <table class="tctable">
          <thead>
            <tr style="width: 669px">
              <th style="width: 78px"></th>
              <th style="width: 327px">标题</th>
              <th style="width: 91px">时长</th>
              <th style="width: 173px">歌手</th>
            </tr>
          </thead>
          <thead v-for="(item, index) in privileges">
            <tr :class="{ active: index <= 2, active1: index % 2 == 0 }">
              <th>{{ index + 1 }}</th>
              <th>
                <img
                  v-if="index <= 2"
                  :src="item.al.picUrl"
                  alt=""
                  width="50px"
                  height="50px"
                />
                {{ item.name }}
              </th>
              <th>3:10</th>
              <th>{{ item.ar[0].name }}</th>
            </tr>
          </thead>
        </table>
        <div class="tlfooter_title" style="margin-top: 40px">
          <h3><span>歌曲列表</span></h3>
          <div class="tlfooter_title" style="margin-top: 40px">
            <h5><span>精彩评论</span></h5>
          </div>
          <!-- <ul>
                <li v-for="items in tlcomment">
                  <span class="skyblue">{{ items.user.nickname }}</span> :
                  {{ items.content }}
                </li>
              </ul> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "hotsongs",
  data() {
    return {
      playlist: {},
      privileges: [],
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/playlist/detail",
      method: "get",
      params: {
        id: 2884035,
      },
    }).then((res) => {
      console.log(res);
      this.playlist = res.data.playlist;

      this.privileges = res.data.playlist.tracks;
      console.log(this.privileges);
    });
  },
};
</script>